<template>
  <div class="city-box" v-if="allList&&allList.length">
    <div class="common-use">
      <h3 class="com-title">常用地址：</h3>
      <ul class="com-list">
        <li class="com-list-item" :class="{active:curCode===com.code}"
            @click="changeCurCode(com)"
            v-for="com in commList">{{com.cname}}
        </li>
      </ul>
    </div>
    <div class="city-search">
      <input type="text" class="city-input" @keyup="findPinYinCity($event)"><span class="city-btn" @click="onSearchBtnClick">搜索</span>
      <ul class="search-res" v-show="promotes.length">
        <li class="search-item" v-for="res in promotes"
            @click="changeCurCode(res)"
        >{{res.cname}}</li>
      </ul>
    </div>
    <div class="search-history" v-show="history.length">
      <h2 class="sear-title">历史记录：</h2>
      <ul class="sear-list">
        <li class="sear-item"
            :class="{active:curCode === his.code}"
            @click="changeCurCode(his)"
            v-for="his in history">{{his.cname}}</li>
        <li class="sear-del" @click="history = []">删除记录</li>
      </ul>
    </div>
    <div class="city-panel">
      <div class="city-toggle-btns">
        <span class="toggle-btn" :class="{active:showProvince}" @click="showProvince = true">按省份</span><span
        class="toggle-btn" :class="{active:!showProvince}" @click="showProvince = false">按城市</span>
      </div>
      <div class="with-prov" v-show="showProvince">
        <ul class="letter-list">
          <li class="letter-item" v-for="letter in provinceList">
            <h3 class="letter-head">{{letter.head}}</h3>
            <ul class="pro-list">
              <li class="pro-item" v-for="pro in letter.list">
                <h3 class="pro-head"
                    @click="changeCurCode(pro)"
                ><span :class="{active:curCode===pro.code}">{{pro.cname}}</span>：</h3>
                <div class="city-list"><span class="city-item"
                                             @click="changeCurCode(city)"
                                             :class="{active:curCode===city.code}"
                                             v-for="city in pro.list">{{city.cname}}</span></div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="with-city" v-show="!showProvince">
        <ul class="letter-list">
          <li class="letter-item" v-for="letter in cityList">
            <h3 class="letter-head">{{letter.head}}</h3>
            <div class="city-list"><span class="city-item"
                                         @click="changeCurCode(city)"
                                         :class="{active:curCode===city.code}"
                                         v-for="city in letter.list">{{city.cname}}</span></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  let cityLetter = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'];
  let provLetter = ['A', 'F', 'G', 'H', 'J', 'L', 'N', 'Q', 'S', 'X', 'Y', 'Z'];
  export default {
    name: "city-box",
    created() {
      this.$http.get('./static/data/city.json').then(function (res) {
        // console.log(res.body);
        this.allList = res.body.data;
        this.commList = res.body.data[0].list;
        let temProvList = res.body.data.slice(1);//不包含全国
        let temProvList1 = res.body.data;//包含全国

        provLetter.map((letter) => {
          let temp = {
            head: letter,
            list: []
          };
          temProvList.map((prov) => {
            if (prov.pyname[0] === letter) {
              temp.list.push(prov);
            }
          });
          this.provinceList.push(temp);
        });

        this.temCityList = [];
        temProvList1.map((item) => {
          this.temCityList = this.temCityList.concat(item.list);
        });
        cityLetter.map((letter) => {
          let temp = {
            head: letter,
            list: []
          };
          this.temCityList.map((city) => {
            if (city.pyname[0] === letter) {
              temp.list.push(city);
            }
          });
          this.cityList.push(temp)
        });
      })
    },
    data() {
      return {
        allList: [],//刚取出的所有数据
        commList: [],//常用城市列表
        provinceList: [],//按省份查询列表
        cityList: [],//按城市查询列表
        temCityList: [],//所有城市列表
        showProvince: true,
        curCode: '000000',
        promotes: [],//搜索结果列表
        history: [],//搜索历史列表
      }
    },
    methods: {
      changeCurCode(place) {
        const {code} = place;
        this.curCode = code;
        this.$emit('changeCode',place);
        this.promotes = [];
        this.saveHistory(place);
      },
      saveHistory(place){
        this.history.push(place);
        if(this.history.length>8){
          this.history = this.history.slice(-8);
        }
      },
      onSearchBtnClick(){
        if(this.promotes.length){
          this.changeCurCode(this.promotes[0]);
        }
      },
      findPinYinCity(event) {
        let val = event.target.value;
        this.promotes = [];
        if (val.length > 0) {
          for (let i = 0; i < this.temCityList.length; i++) {
            let item = this.temCityList[i];
            if (item.pyname.toLowerCase().replace(/ /g, '').indexOf(val) !== -1) {
              this.promotes.push(item);
            } else if (item.cname.indexOf(val) !== -1) {
              this.promotes.push(item);
            }
          }

          if (this.promotes.length > 0) {
            // this.promoteShow = true;
            // console.log(this.promotes);
          }
        } else {
          // this.promoteShow = false;
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/scss/const";
  @import "../../common/scss/func";

  .city-box {
    box-sizing: border-box;
    width: 440px;
    font-size: $ft-small;
    color: $color-comm;
    border: 1px solid $color-border;
    border-radius: 4px;
    padding: 6px 10px;
    background: $color-bg-component;
    .common-use {
      display: flex;
      margin-bottom: 15px;
      .com-title {
        font-size: $ft-small;
        flex: 1 0 auto;
        line-height:1.5;
      }
      .com-list {
        .com-list-item {
          display: inline-block;
          padding: 0 10px;
          cursor: pointer;
          line-height: 1.5;
        }
      }
      .active {
        background: rgba(122, 233, 229, 0.20);
      }
    }
    .city-search {
      display: flex;
      position: relative;
      margin-bottom:10px;
      .city-input {
        flex: 1;
        color: $color-comm;
        outline: none;
        border: 1px solid $color-border;
        border-right: none;
        border-radius: 4px 0 0 4px;
        height: 30px;
        line-height: 30px;
        background: rgba(125,237,233,0.10);
      }
      .city-btn {
        text-align: center;
        height: 30px;
        width: 60px;
        line-height: 30px;
        border: 1px solid $color-border;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
        background: $color-bg-active;
      }
      .search-res {
        width: 100%;
        max-height: 400px;
        border: 1px solid $color-border;
        border-radius: 4px;
        overflow: auto;
        background: $color-bg-component;
        position: absolute;
        top: 120%;
        left: 0;
        z-index: 10;
        .search-item {
          font-size: $ft-middle;
          cursor:pointer;
          padding-left:30px;
          height:40px;
          line-height:40px;
          &:hover {
            background: $color-bg-hover;
          }
        }

      }
    }
    .search-history {
      margin-bottom:10px;
      display:flex;
      .sear-title{
        font-size: $ft-small;
        flex: 0 0 auto;
        line-height: 20px;
      }
      .sear-list{
        position:relative;
        flex:1;
        padding-right:70px;
        .sear-item{
          display: inline-block;
          padding: 0 10px;
          cursor: pointer;
          line-height: 20px;
        }
        .sear-del{
          height:20px;
          line-height:20px;
          padding:0 12px;
          background: rgba(122,233,229,0.20);
          position:absolute;
          bottom:0;
          right:0;
          cursor: pointer;
        }
      }
      .active {
        background: rgba(122, 233, 229, 0.20);
      }
    }
    .city-panel {
      .city-toggle-btns {
        display: flex;
        margin-bottom: 15px;
        .toggle-btn {
          font-size: $ft-middle;
          flex: 1;
          border: 1px solid $color-border;
          text-align: center;
          height: 30px;
          line-height: 30px;
          cursor: pointer;
          background: $color-bg-inactive;
          &.active {
            background: $color-bg-active;
          }
          &:first-child {
            border-right: none;
            border-radius: 4px 0 0 4px;
          }
          &:last-child {
            border-radius: 0 4px 4px 0;
          }
        }
      }
      .with-prov, .with-city {
        .letter-list {
          max-height: 300px;
          overflow-y: scroll;
          .letter-item {
            display: flex;
            margin-bottom: 20px;
            .letter-head {
              flex: 0 0 auto;
              width: 30px;
              font-size: 36px;
              font-family: "Microsoft YaHei UI", serif;
              line-height: 1em;
              color: rgba(122, 233, 229, 0.30);
              padding-right: 20px;
              font-weight:bold;
            }
            .pro-list {
              flex: 0 1 auto;
              .pro-item {
                display: flex;
                margin-bottom: 20px;
                &:last-child {
                  margin-bottom: 0;
                }
                .pro-head {
                  flex: 1 0 auto;
                  max-width: 48px;
                  cursor: pointer;
                  line-height: 1.5;
                }
              }
            }
            .city-list {
              .city-item {
                cursor: pointer;
                padding: 0 10px;
                display: inline-block;
                line-height: 1.5;
              }
            }
            .active {
              background: rgba(122, 233, 229, 0.20);
            }
          }
        }
      }
    }

  }
</style>
